<template>
  <div class="mapPosition">
    <div id="iCenter" />
  </div>
</template>
<script>
  export default {
    name: 'mapPosition',
    data() {
      return {
        positionInfo: {},
      }
    },
    props: {
      points: Array
    },
    mounted() {
      setTimeout(() => {
        console.log(this.points);
        this.initMap();
      }, 1000);
    },
    watch: {
      points() {
        console.log(this.points);
        if (this.points.length !== 0){
          this.initMap();
        }
      }
    },
    methods: {
      initMap() {
        let mapObj = new AMap.Map('iCenter', {
          zoom:5,//级别
          center: [this.points[1].longitude, this.points[1].latitude],//中心点坐标
          viewMode:'3D'//使用3D视图
        });//以为这里是要获取地图容器的id,所以要写在mounted之中
        let marker1 = new AMap.Marker({
          position: new AMap.LngLat(this.points[0].longitude, this.points[0].latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: '起始地'
        });
        let marker2 = new AMap.Marker({
          position: new AMap.LngLat(this.points[this.points.length - 1].longitude, this.points[this.points.length - 1].latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: '终止地'
        });
        var lineArr = this.points.map((item) => {
          return [item.longitude, item.latitude]
        })
        var polyline = new AMap.Polyline({
          path: lineArr,          //设置线覆盖物路径
          strokeColor: "#3366FF", //线颜色
          strokeWeight: 5,        //线宽
          strokeStyle: "solid",   //线样式
        });
        mapObj.add([marker1, marker2]);
        mapObj.add(polyline);
        AMap.plugin('AMap.ToolBar',function(){//异步加载插件
          var toolbar = new AMap.ToolBar();
          mapObj.addControl(toolbar);
        });

      },
    }
  }
</script>
<style scoped>
  .mapPosition {
    width: 100%;
    height: 100%;

  }

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 28px;
  }

  .positionInfo {
    height: 50px;
  }

  span {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    font-size: 21px;
  }

  #iCenter {
    width: 800px;
    height: 354px;
    margin: 0 auto;
  }


</style>
